<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label>全选<input type="checkbox"></label>
    <hr>
    <label>吃<input type="checkbox" class="a"></label>
    <label>和<input type="checkbox" class="a"></label>
    <label>啦<input type="checkbox" class="a"></label>
    <label>撒<input type="checkbox" class="a"></label>
    <script>
        const inp = document.querySelector("input")
        const inps = document.querySelectorAll(".a")
        //点击全选
        inp.onclick = function(){
            //让那四项都要跟着全选的按钮进行是否选中
            inps.forEach(item=>{
                item.checked = inp.checked
            })
        }

        //将伪数组转换成一个真数组
        const arr = [...inps]
        //点击其他的
        inps.forEach(item=>{
            // console.log(item);
            item.onclick = function(){
                //我点击这集合里面每一项,我们要干吗?
                // var res = arr.every(function(item1){
                //     //如果数组里面每一项都选中了,那么全选按钮就选中弄
                //     return item1.checked === true
                // })
                // // console.log(res);
                // inp.checked = res;

                /* 
                    简化
                */
                inp.checked = arr.every(item1=>item1.checked)
            }
        })
    </script>
</body>
</html>